<template >
    <van-nav-bar :title="t('home.退件销毁')" left-arrow @click-left="onClickLeft" />
  
    <van-tabs v-model:active="active"  >
      <!-- <template  >  -->
      <van-pull-refresh   v-model="loadingRefresh" @refresh="onRefresh">
        <!-- <van-list
            :loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            :offset="tabs.offset[item.key]"
            @load="listOnLoad"
          > -->
        <van-tab v-for="item in tabs.tabName" :key="item.key" :title="item.title">
          <template v-if="item.key == 'TOHANDLE'">
            <van-cell>
              <template #title>
                <van-button
                  type="primary"
                  size="small"
                  @click="handleDestroy"
                  :disabled="tabs.data[item.key] && tabs.data[item.key].length == 0"
                >
                  {{ t("returnDestroy.去销毁") }}
                </van-button>
                <div style="padding-top:10px"></div>

                <van-tag size="large" type="warning">{{
                  t("returnDestroy.当前有_个包裹待退件销毁").replace(
                    "_",
                    (tabs.data[item.key] && tabs.data[item.key].length > 0)?tabs.data[item.key].length:0
                  )
                }}</van-tag>
              </template>
            </van-cell>
            <van-cell :value="t('returnDestroy.库位编号')" size="large">
              <template #title>
                {{ t("returnDestroy.包裹编号") }}
              </template>
            </van-cell>
            <van-collapse
              v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
              v-model="activeNames"
            >
              <van-collapse-item
                v-for="order in tabs.data[item.key]"
                :key="order.number"
                :title="order.number"
                :name="order.number"
                icon="orders-o"
                :value="order.storageBlock"
              >
                <template #title>
                  <div>{{ order.originalNumber }} </div>
                </template>
                <van-cell
                  :title="t('returnDestroy.数量')"
                  :value="order.quantity"
                  size="normal"
                />
               
                <!-- <van-button type="primary" @click="print(order)" size="small" block>{{
                  t("returnDestroy.打印面单")
                }}</van-button> -->
              </van-collapse-item>
            </van-collapse>
            <van-empty v-else :description="t('noData')" :image="img_index_path" />
          </template>
  
          <template v-if="item.key == 'UNKNOWN_TO_CHANGE'">
            <van-cell>
              <template #title>
                <van-tag size="large" type="warning">{{
                  t("returnDestroy.当前有_个无头件待换单").replace(
                    "_",
                    (tabs.data[item.key] && tabs.data[item.key].length > 0)?tabs.data[item.key].length:0
                  )
                }}</van-tag>
              </template>
            </van-cell>
            <van-cell
              :title="t('returnDestroy.包裹编号')"
              :value="t('returnDestroy.库位编号')"
              size="large"
            />
            <van-collapse
              v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
              v-model="activeNames"
            >
              <van-collapse-item
                v-for="order in tabs.data[item.key]"
                :key="order.number"
                :title="order.number"
                :name="order.number"
                icon="orders-o"
                :value="order.storageBlock"
              >
                <template #title>
                  <div>{{ order.originalNumber }} <van-icon name="question-o" /></div>
                </template>
                <van-cell
                  :title="t('returnDestroy.原始单号')"
                  :value="order.originalReferNumber"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.仓库')"
                  :value="order.depot"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.状态')"
                  :value="t('returnDestroy.orderStatus.'+order.status)"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.签入时间')"
                  :value="order.checkinDate"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.上架时间')"
                  :value="order.shiftDate"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.签出时间')"
                  :value="order.checkoutDate"
                  size="normal"
                />
                <van-cell :title="t('returnDestroy.信息')" :value="order.memo" size="normal" />
                <van-cell
                  :title="t('returnDestroy.重发单号')"
                  :value="order.retryNumber"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.重发参考号')"
                  :value="order.retryReferNumber"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.重发服务商')"
                  :value="order.retryProvider"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.重发面单')"
                  :value="order.retryProviderLabel"
                  size="normal"
                />
                <!-- <van-button type="primary" @click="print(order)" size="small" block>{{
                  t("returnDestroy.打印面单")
                }}</van-button> -->
              </van-collapse-item>
            </van-collapse>
            <van-empty v-else :description="t('noData')" :image="img_index_path" />
          </template>
  
          <template v-if="item.key == 'HANDLED'">
            <van-cell
              :title="t('returnDestroy.包裹编号')"
              :value="t('returnDestroy.签出时间')"
              size="large"
            />
            <van-collapse
              v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
              v-model="activeNames"
            >
              <van-collapse-item
                v-for="order in tabs.data[item.key]"
                :key="order.number"
                :title="order.number"
                :name="order.number"
                icon="orders-o"
                :value="order.signOutTime"
              >
                <template #title>
                  <div>{{ order.number }} <van-icon name="question-o" /></div>
                </template>
                <van-cell
                  :title="t('returnDestroy.状态')"
                  :value="t('returnDestroy.orderStatus.'+order.status)"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.签入时间')"
                  :value="order.signTime"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.申请派送时间')"
                  :value="order.applyTime"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.派送商')"
                  :value="order.delivery"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.签出时间')"
                  :value="order.signOutTime"
                  size="normal"
                />
                <!-- <van-button type="primary" size="small" block>{{
                    t("returnDestroy.打印面单")
                  }}</van-button> -->
              </van-collapse-item>
            </van-collapse>
            <van-empty v-else :description="t('noData')" :image="img_index_path" />
          </template>
  
          <template v-if="item.key == 'IN'">
            <van-cell
              :title="t('returnDestroy.包裹编号')"
              :value="t('returnDestroy.签入时间')"
              size="large"
            />
            <van-collapse
              v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
              v-model="activeNames"
            >
              <van-collapse-item
                v-for="order in tabs.data[item.key]"
                :key="order.number"
                :title="order.number"
                :name="order.number"
                icon="orders-o"
                :value="order.signTime"
              >
                <template #title>
                  <div>{{ order.number }} <van-icon name="question-o" /></div>
                </template>
                <van-cell
                  :title="t('returnDestroy.状态')"
                  :value="t('returnDestroy.orderStatus.'+order.status)"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.签入时间')"
                  :value="order.signTime"
                  size="normal"
                />
  
                <van-cell
                  :title="t('returnDestroy.库位编号')"
                  :value="order.sblock"
                  size="normal"
                />
              </van-collapse-item>
            </van-collapse>
            <van-empty v-else :description="t('noData')" :image="img_index_path" />
          </template>
  
          <template v-if="item.key == 'ALL'"> 
            <!-- <van-cell>
              <template #title>
                <van-tag size="large" type="warning">{{
                  t("returnDestroy.当前有_个退件包裹").replace(
                    "_",
                    (tabs.data[item.key] && tabs.data[item.key].length > 0)?tabs.data[item.key].length:0
                  )
                }}</van-tag>
              </template>
            </van-cell> -->
            <van-cell :value="t('returnDestroy.库位编号')" size="large">
              <template #title>
                {{ t("returnDestroy.包裹编号") }}
              </template>
            </van-cell>
            <van-collapse
              v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
              v-model="activeNames"
            >
  
  
            <!-- icon="orders-o" --> 
            <!-- <van-icon name="question-o" /> -->
              <van-collapse-item
                v-for="order in tabs.data[item.key]"
                :key="order.number"
                :title="order.number"
                :name="order.number"
                :value="order.storageBlock"
              >
                <template #title>
                  <div>{{ order.originalNumber }} </div>
                </template>
                <van-cell
                  :title="t('returnDestroy.原始单号')"
                  :value="order.originalReferNumber"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.仓库')"
                  :value="order.depot"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.状态')"
                  :value="t('returnDestroy.orderStatus.'+order.status)"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.签入时间')"
                  :value="order.checkinDate"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.上架时间')"
                  :value="order.shiftDate"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.签出时间')"
                  :value="order.checkoutDate"
                  size="normal"
                />
                <van-cell :title="t('returnDestroy.信息')" :value="order.memo" size="normal" />
                <van-cell
                  :title="t('returnDestroy.重发单号')"
                  :value="order.retryNumber"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.重发参考号')"
                  :value="order.retryReferNumber"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.重发服务商')"
                  :value="order.retryProvider"
                  size="normal"
                />
                <van-cell
                  :title="t('returnDestroy.重发面单')"
                  :value="order.retryProviderLabel"
                  size="normal"
                />
                <!-- <van-button type="primary" @click="print(order)" size="small" block>{{
                  t("returnDestroy.打印面单")
                }}</van-button> -->
              </van-collapse-item>
            </van-collapse>
            <van-empty v-else :description="t('noData')" :image="img_index_path" />
          </template>
        </van-tab>
        <!-- </van-list> -->
      </van-pull-refresh>
      <!-- </template> -->
    </van-tabs>
  </template>
  
  <script setup lang="ts"> 
  import img_index_path from '~/noData.png';
  import router from "@/router";
  // import { useStore } from "@/stores";
  // import { localStorage } from "@/utils/local-storage";
  import { postRequest } from "@/api";
  import { AppToast } from "@/utils/appToast";
  import { useI18n } from "vue-i18n";
  import { DEPOT_CODE } from "@/utils/constant";
  const { t } = useI18n();
  // const store = useStore();
  const active = ref(0); 
  const loadingRefresh = ref(false);
  
  const activeNames = ref(["0"]);
  const tabs = reactive({
    tabName: [ 
      {
        index: 0,
        title: t("returnDestroy.待退件销毁"),
        key: "TOHANDLE",
      }, 
      //{
      //  index: 1,
      //  title: t("returnDestroy.全部"),
      //  key: "ALL",
      //},
    ],
    data: {},
    offset: {},
    page: {},
  });
  

  const handleDestroy = () => { 
    //跳转到销毁页面
    router.push({
      path: "/destroy",
    });
  };
  const loadToHandle = async (tabType) => { 
    if (tabType == "TOHANDLE") {
      // postRequest("/ReturnOrderService/tms/return/retry/query", {
      //   depot: DEPOT_CODE,
      //   offset: 0,
      //   limit: 1000,
      // }).then((res) => {
      postRequest("/ReturnOrderService/tms/return/queryWaitDestory", {
        isRetrying: true,
        status:2,
        depot: DEPOT_CODE,
        offset: 0,
        limit: 200,
      }).then((res) => {
        if (res.status === 200) { 
          tabs.data[tabType] = res.data;
          // tabs.offset[tabType] = 100;
          // tabs.page[tabType] = 1;
          AppToast(t("returnDestroy.刷新成功"));
        } else {
          // AppToast(res.message, "fail");
        }
      });
    }
    //if (tabType == "ALL") {
    //  postRequest("/ReturnOrderService/tms/return/query", {
    //    "offset": 0,
    //    "limit": 200 
    //  }).then((res) => {
    //    if (res.status === 200) { 
    //      tabs.data[tabType] = res.data;
    //      // tabs.offset[tabType] = 100;
    //      // tabs.page[tabType] = 1;
    //      AppToast(t("returnDestroy.刷新成功"));
    //    } else {
    //      // AppToast(res.message, "fail");
    //    }
    //  });
    //}
  };
  
  // list
  // const loading = ref(false);
  // const finished = ref(false);
  // //数据加载
  // const listOnLoad = () => {};
  
  const onRefresh = () => {
    const tabType = tabs.tabName.filter((item) => item.index === active.value)[0].key;
    loadToHandle(tabType);
    setTimeout(() => {
      loadingRefresh.value = false;
    }, 500);
  };
  const init = async () => {
    for (let i = 0; i < tabs.tabName.length; i++) {
      const tabType = tabs.tabName[i].key;
      await loadToHandle(tabType);
    }
  };
  init();
  const onClickLeft = () => history.back();
  // const print = (order) => {
  //   console.log(order);
  // };
  </script>
  
  <style lang="less" scoped></style>
  